<template>
  <div>
    <el-carousel :interval="4000" height="600px">
      <el-carousel-item v-for="(item, index) in carouselImage" :key="index">
        <h3 class="medium">
          <ALImage fit="cover"
                   :src="item.imgUrl"
                   style="width:100%; height: 600px">

          </ALImage>
        </h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  import {request} from "../../../util/network/request";
  import ALImage from "../../../components/public/ALImage";
  import {CAROUSEL_GET_ALL} from "../../../util/network/api/carousel/api-carousel";
  export default {
    name: "CarouselComponent",
    components: {ALImage},
    //属性
    props: {},

    //数据
    data() {
      return {
        carouselImage: {},
      }
    },

    //挂载完成时
    mounted() {
      this.getCarousel();
    },

    //方法
    methods: {
      getCarousel: function () {
        request({
          url: CAROUSEL_GET_ALL
        }).then(res => {
          // console.log("========轮播图json数据");
          this.carouselImage = res.data.data;
        }).catch(err => {
          console.log(err);
        });
      },
    },

    //计算属性
    computed: {},

    //监听
    watch: {}
  }
</script>

<style scoped>

</style>
